<script setup lang='ts'>
import { usePortrait } from "./hooks/FincialCreditEnhancement";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  CirclePlusFilled
} from "@element-plus/icons-vue";
const {
  allDataList,
  dataList,
  columns,
  allColumns,
  columns1,
  handleClick,
  EntryPlatform,
  DialogVisible,
  addNew,
  designDate,
  strongTypeList,
  designSelection,
  projectList,
  type,
  changeType,
  overcolLateralization,
  caseFlowData,
  diasbledData,
  changeDisablde,
  handleCancel,
  changeProject,
  SubtimEntryPlatform,
  filterDataList,
  filterSelectId,
  filterProject,
  showGradeDetail,
  gradeDetailVisible,
  changeIssuanceSize,
  changeExpectedIssueRate,
  showCase,
  caseList,
  caseDialog,
  saveCase,
  gradeDetailData,
  caseData,
  caseProjectList,
  changeCaseProject,
  closeCaseDialog,
  caseSelectData,
  // changeProductTerm,
  showCaseDetail,
  isExtiseYield,
  isShowCaseDetail,
  creditEnhancementVisible,
  pagination,
  pagination1,
} = usePortrait()
import { ref, reactive, nextTick, watch } from "vue";
</script>

<template>
  <div class="contain">
      <div class="con-left">
      <div>
        <span :class="showCase == false ? 'blue-text' : ''" @click="showCase = false"
          style="cursor: pointer; margin:0 10px">
          信用增级
          <!-- 激活 -->
        </span>
        <span :class="showCase == false ? '' : 'blue-text'" style="cursor: pointer; margin:0 10px"
          @click="showCase = true">
          制定方案
          <!-- 激活 -->
        </span>
      </div>
      <div v-if="!showCase">
        <PureTableBar title="信用增级列表" class="list_hei">
          <template #buttons>
            <el-button type="primary" @click="addNew()">信用增级 </el-button>
          </template>
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive size="small"
              :data="allDataList" max-height="550" :columns="allColumns" :checkList="checkList" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <el-button type='primary' size="small" text @click="filterProject(row)">
                  查看详情
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
      <div v-if="showCase">
        <PureTableBar title="项目方案列表" class="list_hei">
          <template #buttons>
            <el-button type="primary" @click="caseDialog = true">制定方案 </el-button>
          </template>
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive size="small"
              :data="caseList" max-height="600" :columns="columns1" :pagination="pagination" :checkList="checkList"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <el-button type='primary' size="small" text @click="showCaseDetail(row)">
                  查看详情
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>

  <!-- 添加增信窗口 -->
  <ReDialog :width="800" :height="500" :models="DialogVisible" @Closes="handleCancel()">
    <template #header>
      <h2 style="text-align: center;">内部增信</h2>
    </template>
    <template #main>
      <el-form label-width="150" label-position="right">
        <el-form-item label="资产证券化项目：">
          <el-select placeholder="请选择" v-model="EntryPlatform.assetTransferId" class="!w-[250px]">
            <el-option v-for=" item  in  projectList " :key="item.assetTransferId" :label="item.assetSecuritizationName"
              :value="item.assetTransferId" @click="changeProject(item)" />
          </el-select>
        </el-form-item>
        <el-form-item label="增信方式：">
          <el-select placeholder="请选择" v-model="EntryPlatform.creditEnhancement" class="!w-[250px]">
            <el-option v-for=" item  in  strongTypeList " :key="item.dictId" :label="item.dictName" :value="item.dictId"
              @click="changeType(item)" />
          </el-select>
        </el-form-item>
        <div v-show="type == 1" style=" text-align: left;font-size: 16px;padding:0 22px;">
          <p>
            <b>优先/次级分层结构设计，是资产证券化产品最基本也最常见的内部增信措施，通过将资产支持证券分为优先档和次级档或更多级别，在还本付息、损失分配安排上，优先级证券享有优先权，通过次级证券为优先级进行增信。</b>假设基础资产池对应资产支持证券规模5亿元，其中优先档4亿元，则优先档证券可获得次级档证券提供的相当于基础资产池余额20%的信用支持。优先档又可根据投资者需求或现金流情况再进行细分，最高级别的资产支持证券获得的信用支持最大。
          </p>
          <div style="margin-top:10px">
            优先/次级层次安排：
          </div>
          <table class="table-center">
            <thead>
              <tr>
                <th style=' width:150px'>证券分层</th>
                <th style='width:150px'><el-input v-model.trim="designDate[0].layerName" style="width:80%"
                    :disabled="diasbledData[0]" /></th>
                <th style='width:150px'><el-input v-model.trim="designDate[1].layerName" style="width:80%"
                    :disabled="diasbledData[1]" /></th>
                <th style='width:150px'><el-input v-model.trim="designDate[2].layerName" style="width:80%"
                    :disabled="diasbledData[2]" /></th>
                <th style='width:150px'><el-input v-model.trim="designDate[3].layerName" style="width:80%"
                    :disabled="diasbledData[3]" /></th>
                <th style='width:150px'><el-input v-model.trim="designDate[4].layerName" style="width:80%"
                    :disabled="diasbledData[4]" /></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>优先级</th>
                <th>
                  <el-select placeholder="请选择" v-model="designDate[0].priority" style="width:80%" clearable
                    :disabled="diasbledData[0]">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" @click="changeDisablde(item)" />
                  </el-select>
                </th>
                <th> <el-select placeholder="请选择" v-model="designDate[1].priority" style="width:80%" clearable
                    :disabled="diasbledData[1]">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" @click="changeDisablde(item)" />
                  </el-select></th>
                <th> <el-select placeholder="请选择" v-model="designDate[2].priority" style="width:80%" clearable
                    :disabled="diasbledData[2]">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" @click="changeDisablde(item)" />
                  </el-select></th>
                <th> <el-select placeholder="请选择" v-model="designDate[3].priority" style="width:80%" clearable
                    :disabled="diasbledData[3]">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" @click="changeDisablde(item)" />
                  </el-select></th>
                <th> <el-select placeholder="请选择" v-model="designDate[4].priority" style="width:80%" clearable
                    :disabled="diasbledData[4]">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" @click="changeDisablde(item)" />
                  </el-select></th>
              </tr>
              <tr>
                <th>规模占比</th>
                <th style='width:150px'><el-input v-model.number="designDate[0].sizePercentage" style="width:70%"
                    :disabled="diasbledData[0]" type="number" />%</th>
                <th style='width:150px'><el-input v-model.number="designDate[1].sizePercentage" style="width:70%"
                    :disabled="diasbledData[1]" type="number" />%</th>
                <th style='width:150px'><el-input v-model.number="designDate[2].sizePercentage" style="width:70%"
                    :disabled="diasbledData[2]" type="number" />%</th>
                <th style='width:150px'><el-input v-model.number="designDate[3].sizePercentage" style="width:70%"
                    :disabled="diasbledData[3]" type="number" />%</th>
                <th style='width:150px'><el-input v-model.number="designDate[4].sizePercentage" style="width:70%"
                    :disabled="diasbledData[4]" type="number" />%</th>
              </tr>
              <tr>
                <th>总期限</th>
                <th>{{ designDate[0].totalTerm }}天</th>
                <th>{{ designDate[1].totalTerm }}天</th>
                <th>{{ designDate[2].totalTerm }}天</th>
                <th>{{ designDate[3].totalTerm }}天</th>
                <th>{{ designDate[4].totalTerm }}天</th>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-show="type == 2" style="text-align: left;font-size: 16px;padding:0 22px;">
          <p style="text-align: left;">
            <b>超额抵押是指发行资产支持证券时，基础资产池的规模本金大于发行证券的本金，多出来的这部分就可作为超额抵押为所出售的资产支持证券进行信用增级。</b>部分证券化产品会约定在证券偿还期间，抵押资产价值下降到预先设定的某一规模时，发行人必须增加抵押资产从而恢复超额抵押状态。例如梅赛德斯-奔驰汽车金融公司发行的“速利银丰中国2016年第一期汽车贷款支持证券”就约定每个支付日的目标超额抵押金额为初始起算日的变动后资产池余额的10.77%。一般超额抵押也多用于债权类基础资产，包括各类应收款、租赁租金债权、银行信贷债权等。
          </p>
          <div style="margin-top:10px">
            超额抵押设置：
          </div>
          <table class="table-center">
            <thead>
              <tr>
                <th style='width:30%'>基础资产池规模</th>
                <th style='width:30%'>{{ caseFlowData.basicAssetSize }}元</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>发行证券规模</th>
                <th>
                  {{ caseFlowData.issuedSecuritiesSize }}元
                </th>
              </tr>
              <tr>
                <th>超额抵押资产规模</th>
                <th>{{ caseFlowData.excessCollateralSize }}元</th>
              </tr>
            </tbody>
          </table>
        </div>

        <div v-show="type == 3" style="text-align: left;font-size: 16px;padding:0 22px;">
          <p>
            <b>超额现金流覆盖实际上也是超额利差的一种，但一般多出现在权益类基础资产产品中，例如基础资产收费权等。</b>2016年“启东供水收费收益权资产支持专项计划”和“营口华源热力供热合同债权1号资产支持专项计划”都采用了这种增信措施。在设计资产证券化产品时，使基础资产产生的未来现金流大于需要支付给投资者的本息，从而增加本息偿付的安全系数。超额现金流覆盖的增级效果主要需考察现金流回收的保障机制，特别是发行人信用水平降低时，现金流是否还能维持稳定回收。
          </p>
          <div style="margin-top:10px">
            超额现金流覆盖设置：
          </div>
          <table class="table-center">
            <thead>
              <tr>
                <th style='width:30%'>未来现金流</th>
                <th style='width:30%'>{{ overcolLateralization.futureCashFlow }}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>优先级资产支持证券发行规模</th>
                <th> {{ overcolLateralization.issuanceSize }}元</th>
              </tr>
              <tr>
                <th>优先级资产支持证券收益率（小于等于5%）</th>
                <th><el-input v-model.number="overcolLateralization.yieldRate" style="width:30%" placeholder="支持证券发行规模"
                    type="number" @blur="changeIssuanceSize()" />%</th>
              </tr>
              <tr>
                <th>优先级资产支持证券本息</th>
                <th>{{ overcolLateralization.principalAndInterest }}元</th>
              </tr>
              <tr>
                <th>现金流覆盖倍数</th>
                <th>{{ overcolLateralization.cashFlowCoverageRatio }}</th>
              </tr>
            </tbody>
          </table>
        </div>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="SubtimEntryPlatform()"> 确定 </el-button>
        <el-button @click="handleCancel()"> 关闭 </el-button>
      </span>
    </template>
  </ReDialog>
  <!-- 获取该项目下的增信列表弹窗 -->

  <ReDialog :width="800" :height="500" :models="creditEnhancementVisible" @Closes="creditEnhancementVisible = false">
    <template #header>
      <h2 style="text-align: center;">信用增级详情列表</h2>
    </template>
    <template #main>
      <PureTableBar title="信用增级列表" class="list_hei">
        <template v-slot="{ size, checkList }">
          <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive size="small"
            :data="dataList" max-height="550" :columns="columns" :checkList="checkList" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }">
            <template #operation="{ row }">
              <el-button type='primary' size="small" text @click="showGradeDetail(row)">
                查看详情
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </template>
  </ReDialog>

  <ReDialog :width="800" :height="500" :models="gradeDetailVisible" @Closes="gradeDetailVisible = false">
    <template #header>
      <h2 style="text-align: center;">内部增信</h2>
    </template>
    <template #main>
      <!-- 增信详情窗口 -->
      <el-form label-width="150" label-position="right">
        <el-form-item label="资产证券化项目：">
          <el-select placeholder="请选择" v-model="gradeDetailData.assetTransferId" disabled>
            <el-option v-for=" item  in  projectList " :key="item.assetTransferId" :label="item.assetSecuritizationName"
              :value="item.assetTransferId" @click="changeProject(item)" />
          </el-select>
        </el-form-item>
        <el-form-item label="增信方式：">
          <el-select placeholder="请选择" v-model="gradeDetailData.creditEnhancement" disabled>
            <el-option v-for=" item  in  strongTypeList " :key="item.dictId" :label="item.dictName" :value="item.dictId"
              @click="changeType(item)" />
          </el-select>
        </el-form-item>
        <div v-if="gradeDetailData.type == 1" style=" text-align: left;font-size: 16px;padding:0 22px;">
          <p>
            <b>优先/次级分层结构设计，是资产证券化产品最基本也最常见的内部增信措施，通过将资产支持证券分为优先档和次级档或更多级别，在还本付息、损失分配安排上，优先级证券享有优先权，通过次级证券为优先级进行增信。</b>假设基础资产池对应资产支持证券规模5亿元，其中优先档4亿元，则优先档证券可获得次级档证券提供的相当于基础资产池余额20%的信用支持。优先档又可根据投资者需求或现金流情况再进行细分，最高级别的资产支持证券获得的信用支持最大。
          </p>
          <div style="margin-top:10px">
            优先/次级层次安排：
          </div>
          <table class="table-center">
            <thead>
              <tr>
                <th style='width:150px'>证券分层</th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[0].layerName"
                    style="width:80%" disabled="true" /></th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[1].layerName"
                    style="width:80%" disabled="true" /></th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[2].layerName"
                    style="width:80%" disabled="true" /></th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[3].layerName"
                    style="width:80%" disabled="true" /></th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[4].layerName"
                    style="width:80%" disabled="true" /></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>优先级</th>
                <th>
                  <el-select placeholder="请选择" v-model="gradeDetailData.seniorSubArrangement[0].priority"
                    style="width:80%" clearable disabled="true">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" />
                  </el-select>
                </th>
                <th> <el-select placeholder="请选择" v-model="gradeDetailData.seniorSubArrangement[1].priority"
                    style="width:80%" clearable disabled="true">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" />
                  </el-select></th>
                <th> <el-select placeholder="请选择" v-model="gradeDetailData.seniorSubArrangement[2].priority"
                    style="width:80%" clearable disabled="true">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" />
                  </el-select></th>
                <th> <el-select placeholder="请选择" v-model="gradeDetailData.seniorSubArrangement[3].priority"
                    style="width:80%" clearable disabled="true">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" />
                  </el-select></th>
                <th> <el-select placeholder="请选择" v-model="gradeDetailData.seniorSubArrangement[4].priority"
                    style="width:80%" clearable disabled="true">
                    <el-option v-for="  item   in   designSelection  " :key="item.dictId" :label="item.dictName"
                      :value="item.dictId" />
                  </el-select></th>
              </tr>
              <tr>
                <th>规模占比</th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[0].sizePercentage"
                    style="width:70%" disabled="true" type="number" />%</th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[1].sizePercentage"
                    style="width:70%" disabled="true" type="number" />%</th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[2].sizePercentage"
                    style="width:70%" disabled="true" type="number" />%</th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[3].sizePercentage"
                    style="width:70%" disabled="true" type="number" />%</th>
                <th style='width:150px'><el-input v-model="gradeDetailData.seniorSubArrangement[4].sizePercentage"
                    style="width:70%" disabled="true" type="number" />%</th>
              </tr>
              <tr>
                <th>总期限</th>
                <th>{{ gradeDetailData.seniorSubArrangement[0].totalTerm }}天</th>
                <th>{{ gradeDetailData.seniorSubArrangement[1].totalTerm }}天</th>
                <th>{{ gradeDetailData.seniorSubArrangement[2].totalTerm }}天</th>
                <th>{{ gradeDetailData.seniorSubArrangement[3].totalTerm }}天</th>
                <th>{{ gradeDetailData.seniorSubArrangement[4].totalTerm }}天</th>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-if="gradeDetailData.type == 2" style="text-align: left;font-size: 16px;padding:0 22px;">
          <p style="text-align: left;">
            <b>超额抵押是指发行资产支持证券时，基础资产池的规模本金大于发行证券的本金，多出来的这部分就可作为超额抵押为所出售的资产支持证券进行信用增级。</b>部分证券化产品会约定在证券偿还期间，抵押资产价值下降到预先设定的某一规模时，发行人必须增加抵押资产从而恢复超额抵押状态。例如梅赛德斯-奔驰汽车金融公司发行的“速利银丰中国2016年第一期汽车贷款支持证券”就约定每个支付日的目标超额抵押金额为初始起算日的变动后资产池余额的10.77%。一般超额抵押也多用于债权类基础资产，包括各类应收款、租赁租金债权、银行信贷债权等。
          </p>
          <div style="margin-top:10px">
            超额抵押设置：
          </div>
          <table class="table-center">
            <thead>
              <tr>
                <th style='width:30%'>基础资产池规模</th>
                <th style='width:30%'>{{ gradeDetailData.seniorSubArrangement.basicAssetSize }}元</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>发行证券规模</th>
                <th>{{ gradeDetailData.seniorSubArrangement.issuedSecuritiesSize }}元
                </th>
              </tr>
              <tr>
                <th>超额抵押资产规模</th>
                <th>{{ gradeDetailData.seniorSubArrangement.excessCollateralSize }}元</th>
              </tr>
            </tbody>
          </table>
        </div>

        <div v-if="gradeDetailData.type == 3" style="text-align: left;font-size: 16px;padding:0 22px;">
          <p>
            <b>超额现金流覆盖实际上也是超额利差的一种，但一般多出现在权益类基础资产产品中，例如基础资产收费权等。</b>2016年“启东供水收费收益权资产支持专项计划”和“营口华源热力供热合同债权1号资产支持专项计划”都采用了这种增信措施。在设计资产证券化产品时，使基础资产产生的未来现金流大于需要支付给投资者的本息，从而增加本息偿付的安全系数。超额现金流覆盖的增级效果主要需考察现金流回收的保障机制，特别是发行人信用水平降低时，现金流是否还能维持稳定回收。
          </p>
          <div style="margin-top:10px">
            超额现金流覆盖设置：
          </div>
        <table class="table-center">
          <thead>
            <tr>
              <th style='width:30%'>未来现金流</th>
                <th style='width:30%'>{{ gradeDetailData.seniorSubArrangement.futureCashFlow }}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>优先级资产支持证券发行规模</th>
                <th>{{
                  gradeDetailData.seniorSubArrangement.issuanceSize }}元</th>
              </tr>
              <tr>
                <th>优先级资产支持证券收益率</th>
                <th>{{ gradeDetailData.seniorSubArrangement.yieldRate }}%</th>
              </tr>

              <tr>
                <th>优先级资产支持证券本息</th>
                <th>{{ gradeDetailData.seniorSubArrangement.principalAndInterest }}元</th>
              </tr>
              <tr>
                <th>现金流覆盖倍数</th>
                <th>{{ gradeDetailData.seniorSubArrangement.cashFlowCoverageRatio }}</th>
              </tr>
            </tbody>
          </table>
        </div>
      </el-form>
    </template>
  </ReDialog>

  <!-- 方案窗口 -->

  <ReDialog :width="800" :height="500" :models="caseDialog" @Closes="closeCaseDialog()">
    <template #header>
      <h2 style="text-align: center;">添加方案窗口</h2>
    </template>
    <template #main>
      <el-form label-width="180px" :model="caseData">
        <el-form-item label="资产证券化项目：">
          <el-select placeholder="请选择" v-model="caseData.assetTransferId" style="width:70%" :disabled="isShowCaseDetail">
            <el-option v-for=" item  in  caseProjectList " :key="item.assetTransferId"
              :label="item.assetSecuritizationName" :value="item.assetTransferId" @click="changeCaseProject(item)" />
          </el-select>
        </el-form-item>
        <el-form-item label="原始权益人（若有）：">
          ****
        </el-form-item>
        <el-form-item label="计划管理人：">
          ****
        </el-form-item>
        <el-form-item label="发行规模：">
          {{ caseData.expectedIssueSize }}元
        </el-form-item>
        <el-form-item label="产品期限：">
          <!-- <div v-if="!isShowCaseDetail">
                                                  <el-input v-model="caseData.productTerm" style="margin-right: 10px;" class="w-192" placeholder="请输入发行证券规模"
                                                    type="number" @blur="changeProductTerm()" />天（最多输入{{
                                                      caseData.productLimit }}天）
                                                </div> -->
          <div>{{ caseData.productTerm }}天</div>
        </el-form-item>
        <el-form-item label="还本利息的安排：">
          <el-select placeholder="请选择" v-model="caseData.repaymentArrangement" style="width:30%"
            :disabled="isShowCaseDetail">
            <el-option label="按月支付利息" value="按月支付利息" />
            <el-option label="到期一次还本付息" value="到期一次还本付息" />
          </el-select>
        </el-form-item>
        <el-form-item label="预期发行利率：">
          <div v-if="isExtiseYield">
            {{ caseData.expectedIssueRate }}%
          </div>
          <div v-else>
            <el-input v-model.number="caseData.expectedIssueRate" style="width:150px" placeholder="预期发行利率" type="number"
              @blur="changeExpectedIssueRate()" />%（小于等于5%）
          </div>
        </el-form-item>
        <el-form-item label="增信机制：">
          {{ caseData.creditEnhancementName }}
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveCase()" v-if="!isShowCaseDetail"> 确定 </el-button>
        <el-button @click="closeCaseDialog()" v-if="!isShowCaseDetail"> 取消 </el-button>
      </span>
    </template>
  </ReDialog>
</template>

<style scoped lang="scss">
.contain {
  width: 100%;
  height: 100%;
  display: flex;
}

.con-left {
  width: 100%;
  padding: 10px
}

.con-right {
  flex: 1;
  display: flex;
  background-color: red;
}

.triangle {
  cursor: pointer;
  border: 2px solid #333;
  width: 23%;
  height: 150px;
  margin-right: 10%;
  margin-top: 20px;
  background: linear-gradient(to top right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%),
    linear-gradient(to bottom right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle1 {
  border: 1px solid #fff;
  background: #fff;
  text-align: center;
}

.iocn {
  width: 50px;
  font-size: 20px;
  display: inline-block;
  padding: 2px;
  color: #409Eff;
}

table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}

.table-center {
  margin-top: 20px;
  text-align: center;
}


:deep(.el-input__inner) {
  text-align: center;
}

.blue-text {
  color: #409Eff
}

:deep(.el-form-item__label) {
  font-weight: 700
}
</style>
